```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电商平台全栈项目 | 技术小馆</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        :root {
            --primary: #4361ee;
            --primary-light: #4895ef;
            --secondary: #3f37c9;
            --accent: #f72585;
            --dark: #1b263b;
            --light: #f8f9fa;
            --gray: #6c757d;
        }
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: var(--dark);
            line-height: 1.6;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .hero-bg {
            background: linear-gradient(135deg, rgba(67, 97, 238, 0.9) 0%, rgba(72, 149, 239, 0.9) 100%), url('https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80') no-repeat center center;
            background-size: cover;
        }
        .card {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        .badge {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 600;
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
        }
        .mermaid {
            background: white;
            padding: 1.5rem;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        .drop-cap::first-letter {
            float: left;
            font-size: 3.5rem;
            line-height: 1;
            margin: 0.15em 0.1em 0 0;
            color: var(--primary);
            font-weight: bold;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Header -->
    <header class="hero-bg text-white py-20 px-4 sm:px-6 lg:px-8">
        <div class="max-w-7xl mx-auto text-center">
            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-4">电商平台全栈项目</h1>
            <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">基于微服务架构的分布式电商平台解决方案</p>
            <div class="flex justify-center space-x-4">
                <a href="#project" class="bg-white text-primary px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition-all">项目详情</a>
                <a href="#code" class="bg-transparent border-2 border-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:text-primary transition-all">获取代码</a>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <!-- Project Overview -->
        <section id="project" class="mb-16">
            <div class="flex items-center mb-8">
                <div class="h-1 bg-primary flex-1"></div>
                <h2 class="text-3xl font-bold px-4 text-center">项目介绍</h2>
                <div class="h-1 bg-primary flex-1"></div>
            </div>

            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div class="bg-white rounded-xl p-6 card">
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <i class="fas fa-sitemap text-primary mr-2"></i> 系统架构
                    </h3>
                    <p class="text-gray-700 mb-4">本项目采用微服务架构设计，通过Spring Cloud实现服务治理，包含15个核心业务模块，支持高并发、高可用的电商业务场景。</p>
                    <div class="mermaid">
                        graph TD
                            A[用户端] --> B[API网关]
                            B --> C[用户服务]
                            B --> D[商品服务]
                            B --> E[订单服务]
                            B --> F[支付服务]
                            C --> G[MySQL]
                            D --> H[Elasticsearch]
                            E --> I[Redis]
                            F --> J[RabbitMQ]
                    </div>
                </div>
                
                <div class="bg-white rounded-xl p-6 card">
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <i class="fas fa-project-diagram text-primary mr-2"></i> 技术架构图
                    </h3>
                    <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1651053203755-28c53c6b-ef63-4aab-9d08-a51149ac24a1.png" alt="技术架构图" class="w-full h-auto rounded-lg">
                </div>
            </div>

            <!-- Business Modules -->
            <div class="mb-16">
                <h3 class="text-2xl font-bold mb-6 flex items-center">
                    <i class="fas fa-cubes text-primary mr-2"></i> 业务模块
                </h3>
                <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
                    <div class="bg-white p-4 rounded-lg shadow-sm border-l-4 border-primary">
                        <h4 class="font-bold mb-2">后台管理</h4>
                        <p class="text-sm text-gray-600">提供完整的商家后台管理功能</p>
                    </div>
                    <div class="bg-white p-4 rounded-lg shadow-sm border-l-4 border-primary">
                        <h4 class="font-bold mb-2">首页服务</h4>
                        <p class="text-sm text-gray-600">展示商品推荐、促销活动等</p>
                    </div>
                    <div class="bg-white p-4 rounded-lg shadow-sm border-l-4 border-primary">
                        <h4 class="font-bold mb-2">用户服务</h4>
                        <p class="text-sm text-gray-600">用户注册、登录、个人信息管理</p>
                    </div>
                    <div class="bg-white p-4 rounded-lg shadow-sm border-l-4 border-primary">
                        <h4 class="font-bold mb-2">商品服务</h4>
                        <p class="text-sm text-gray-600">商品分类、搜索、详情展示</p>
                    </div>
                    <div class="bg-white p-4 rounded-lg shadow-sm border-l-4 border-primary">
                        <h4 class="font-bold mb-2">购物车服务</h4>
                        <p class="text-sm text-gray-600">商品添加、删除、数量修改</p>
                    </div>
                    <div class="bg-white p-4 rounded-lg shadow-sm border-l-4 border-primary">
                        <h4 class="font-bold mb-2">单点登录</h4>
                        <p class="text-sm text-gray-600">基于JWT的统一认证系统</p>
                    </div>
                    <div class="bg-white p-4 rounded-lg shadow-sm border-l-4 border-primary">
                        <h4 class="font-bold mb-2">订单服务</h4>
                        <p class="text-sm text-gray-600">订单创建、查询、状态管理</p>
                    </div>
                    <div class="bg-white p-4 rounded-lg shadow-sm border-l-4 border-primary">
                        <h4 class="font-bold mb-2">支付服务</h4>
                        <p class="text-sm text-gray-600">集成多种支付方式</p>
                    </div>
                    <div class="bg-white p-4 rounded-lg shadow-sm border-l-4 border-primary">
                        <h4 class="font-bold mb-2">邮件服务</h4>
                        <p class="text-sm text-gray-600">订单通知、营销邮件发送</p>
                    </div>
                    <div class="bg-white p-4 rounded-lg shadow-sm border-l-4 border-primary">
                        <h4 class="font-bold mb-2">搜索服务</h4>
                        <p class="text-sm text-gray-600">基于Elasticsearch的全文检索</p>
                    </div>
                    <div class="bg-white p-4 rounded-lg shadow-sm border-l-4 border-primary">
                        <h4 class="font-bold mb-2">配置中心</h4>
                        <p class="text-sm text-gray-600">统一配置管理</p>
                    </div>
                    <div class="bg-white p-4 rounded-lg shadow-sm border-l-4 border-primary">
                        <h4 class="font-bold mb-2">注册中心</h4>
                        <p class="text-sm text-gray-600">服务发现与注册</p>
                    </div>
                </div>
            </div>

            <!-- Technology Stack -->
            <div>
                <h3 class="text-2xl font-bold mb-6 flex items-center">
                    <i class="fas fa-code text-primary mr-2"></i> 技术栈
                </h3>
                <div class="flex flex-wrap gap-2 mb-4">
                    <span class="badge bg-blue-100 text-blue-800"><i class="fas fa-leaf mr-1"></i> SpringBoot</span>
                    <span class="badge bg-blue-100 text-blue-800"><i class="fas fa-leaf mr-1"></i> Spring</span>
                    <span class="badge bg-blue-100 text-blue-800"><i class="fas fa-database mr-1"></i> MyBatisPlus</span>
                    <span class="badge bg-blue-100 text-blue-800"><i class="fas fa-cloud mr-1"></i> SpringCloud</span>
                    <span class="badge bg-purple-100 text-purple-800"><i class="fas fa-exchange-alt mr-1"></i> RabbitMQ</span>
                    <span class="badge bg-red-100 text-red-800"><i class="fas fa-database mr-1"></i> Redis</span>
                    <span class="badge bg-yellow-100 text-yellow-800"><i class="fas fa-search mr-1"></i> Elasticsearch</span>
                    <span class="badge bg-green-100 text-green-800"><i class="fas fa-hdd mr-1"></i> FastDFS</span>
                    <span class="badge bg-indigo-100 text-indigo-800"><i class="fas fa-key mr-1"></i> JWT</span>
                    <span class="badge bg-indigo-100 text-indigo-800"><i class="fas fa-lock mr-1"></i> jBCrypt</span>
                    <span class="badge bg-teal-100 text-teal-800"><i class="fas fa-database mr-1"></i> MySQL</span>
                    <span class="badge bg-blue-100 text-blue-800"><i class="fab fa-docker mr-1"></i> Docker</span>
                    <span class="badge bg-green-100 text-green-800"><i class="fas fa-server mr-1"></i> Nginx</span>
                </div>

                <div class="bg-white rounded-xl p-6 card">
                    <h4 class="text-lg font-bold mb-4">核心特性</h4>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>微服务架构，实现业务解耦和高可用</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>分布式事务处理，保证数据一致性</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>Redis缓存优化，提高系统响应速度</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>Elasticsearch实现高效的全文检索</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>Docker容器化部署，简化运维</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>MySQL分库分表，支持海量数据存储</span>
                        </li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- Code Section -->
        <section id="code" class="mb-16">
            <div class="flex items-center mb-8">
                <div class="h-1 bg-primary flex-1"></div>
                <h2 class="text-3xl font-bold px-4 text-center">获取代码</h2>
                <div class="h-1 bg-primary flex-1"></div>
            </div>

            <div class="bg-white rounded-xl p-8 card">
                <div class="flex flex-col md:flex-row items-center">
                    <div class="md:w-2/3 mb-6 md:mb-0 md:pr-8">
                        <h3 class="text-2xl font-bold mb-4">项目源代码</h3>
                        <p class="text-gray-700 mb-6 drop-cap">本项目的完整源代码已托管在百度网盘，包含所有业务模块的实现代码、配置文件以及部署文档。项目采用Maven多模块管理，每个服务都可以独立运行和部署。</p>
                        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
                            <h4 class="font-bold text-blue-800 mb-2 flex items-center">
                                <i class="fas fa-info-circle mr-2"></i> 使用说明
                            </h4>
                            <ul class="text-sm text-blue-700 space-y-1">
                                <li>1. 下载并解压代码包</li>
                                <li>2. 导入IDE（推荐IntelliJ IDEA）</li>
                                <li>3. 配置MySQL、Redis等环境</li>
                                <li>4. 依次启动注册中心、配置中心和各微服务</li>
                            </ul>
                        </div>
                    </div>
                    <div class="md:w-1/3 bg-gray-50 rounded-lg p-6 text-center">
                        <div class="bg-white p-4 rounded-lg shadow-inner mb-4">
                            <i class="fas fa-download text-4xl text-primary mb-3"></i>
                            <h4 class="font-bold">下载链接</h4>
                        </div>
                        <a href="https://pan.baidu.com/s/1mixS7Y4zPBXtV4lV8Wt8yw?pwd=7riq" target="_blank" class="inline-block bg-primary hover:bg-primary-dark text-white px-6 py-3 rounded-lg font-medium w-full transition-all">
                            <i class="fas fa-cloud-download-alt mr-2"></i> 百度网盘下载
                        </a>
                        <div class="mt-4 text-sm text-gray-600">
                            <p>提取码: <span class="font-mono bg-gray-200 px-2 py-1 rounded">7riq</span></p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <h3 class="text-white text-lg font-bold">技术小馆</h3>
                    <p class="text-sm">专业的技术分享与实践平台</p>
                </div>
                <div>
                    <a href="http://www.yuque.com/jtostring" target="_blank" class="text-gray-300 hover:text-white transition-colors">
                        <i class="fas fa-external-link-alt mr-1"></i> http://www.yuque.com/jtostring
                    </a>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-6 pt-6 text-center text-sm">
                <p>© 2023 技术小馆. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>
```